<template>
  <div class="loginmain">
    <div class="login">
      <!-- 登录验证界面 -->
      <div class="loginForm" @keyup.enter="submitForm('ruleForm')">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名:" prop="user">
            <el-input
              type="text"
              v-model="ruleForm.user"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="Pass">
            <el-input
              type="password"
              v-model="ruleForm.Pass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button type="info" @click="resetForm('ruleForm')"
              >重置</el-button
            >
            <el-button type="text" style="float: right">找回密码</el-button>
          </el-form-item>
          <div class="fastLogin">
            <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
            <a
              href="javascript:;"
              class="goRegister el-button--text"
              @click="goRegister"
              >去注册</a
            >
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    var validateuser = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        user: '',
        Pass: ''
      },
      rules: {
        user: [{ validator: validateuser, trigger: 'blur' }],
        Pass: [{ validator: validatePass, trigger: 'blur' }]
      }
    }
  },
  watch: {
    loginStatus: {
      deep: true,
      handler (newval, oldval) {
        if (newval.status === 1) {
          this.$error(newval.msg)
        } else {
          this.$success(newval.msg)
          localStorage.setItem('token', newval.token)
          setTimeout(() => {
            this.$router.push({
              path: '/home'
            })
          }, 500)
        }
      }
    }
  },
  computed: {
    ...mapState('loginAbout', ['loginStatus'])
  },
  methods: {
    goRegister () {
      this.$router.push({
        name: 'register'
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.dispatch('loginAbout/login', this.ruleForm)
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }

}
</script>

<style scoped lang="less">
.loginmain {
  .login {
    height: 500px;
    background: url('./img/loginbg.bc528304.png') no-repeat top;
    width: 100% !important;
    background-color: #e93854;
    .loginForm {
      padding-top: 30px;
      padding-right: 30px;
      width: 450px;
      height: 350px;
      float: right;
      margin-right: 50px;
      margin-top: 100px;
      background-color: #fff;
      .fastLogin {
        display: flex;
        justify-content: space-between;
        padding-left: 30px;
        ul {
          margin: 0;
          padding: 0;
          display: flex;
          li {
            height: 40px;
            width: 40px;
            background: url('./img/下载.png') no-repeat center;
            &:nth-child(2) {
              background: url('./img/下载 (1).png') no-repeat center;
            }
            &:nth-child(3) {
              background: url('./img/下载 (2).png') no-repeat center;
            }
            &:nth-child(4) {
              background: url('./img/下载 (3).png') no-repeat center;
            }
          }
        }
      }
    }
  }
}
// 保单验证
.goRegister {
  float: right;
  height: 40px;
  line-height: 40px;
}
</style>
